<template>
  <el-container class="my-container">
    <el-header class="my-header">
      <div class="left">
        <i class="el-icon-s-fold" @click="isCollapse=!isCollapse"></i>
        <img src="../../assets/login_logo.png" alt />
        <span>黑马面面</span>
      </div>
      <div class="right">
        <img :src="$store.state.userIcon" alt />
        <span class="name">{{$store.state.username}},你好</span>
        <el-button type="primary" size="small" @click="UserLogout">退出</el-button>
      </div>
    </el-header>
    <el-container>
      <!-- 侧边导航 -->
      <el-aside width="auto" class="my-aside">
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          router
        >
          <el-menu-item index="/index/chart">
            <i class="el-icon-pie-chart"></i>
            <span slot="title">数据概览</span>
          </el-menu-item>
          <el-menu-item index="/index/user">
            <i class="el-icon-user"></i>
            <span slot="title">用户列表</span>
          </el-menu-item>
          <el-menu-item index="/index/question">
            <i class="el-icon-edit-outline"></i>
            <span slot="title">题库列表</span>
          </el-menu-item>
          <el-menu-item index="/index/enterprise">
            <i class="el-icon-office-building"></i>
            <span slot="title">企业列表</span>
          </el-menu-item>
          <el-menu-item index="/index/subject">
            <i class="el-icon-notebook-2"></i>
            <span slot="title">学科列表</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main class="my-main">
        <!-- 路由出口 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>




<script>
// 导入 登录 登出 函数
import { logout } from '@/api/index';
// 导入token 函数
import { removeToken } from '@/utils/token';
export default {
  props: {

  },
  data () {
    return {
      // userInfo: {},
      // userIcon: '',
      // 是否折叠
      isCollapse: false
    }
  },
  computed: {

  },
  beforeCreate () {
    // // 判断页面有没有token存在 没有返回登录页
    // if (!getToken()) {
    //   this.$message.warning('请先登录')
    //   this.$router.push('/login')
    // }
  },
  // async 
  created () {
    // 判断返回的状态是否有误 报错是token问题
    // let res = await info()
    // this.userInfo = res.data.data
    // this.userIcon = process.env.VUE_APP_URL + '/' + res.data.data.avatar
    // if (res.data.code === 206) {
    //   this.$message.warning('登录状态异常,请重新登录')
    //   // 删除本地token 
    //   removeToken()
    //   // 返回登录页面
    //   this.$router.push('/login')
    //   return
    // } else if (res.data.code === 200) {

    // }
  },
  mounted () {
  },
  watch: {

  },
  methods: {
    UserLogout () {
      // 弹框确定
      this.$confirm('你确定要离开我们网站吗', '友情提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 点击确定
        let res = await logout()
        if (res.data.code === 200) {
          // 移除token
          removeToken()
          // 把vuex中的头像和名字一起移除掉
          this.$store.commit('changeIcon', '')
          this.$store.commit('changeName', '')
          // 跳转到登录页
          this.$router.push('/login')
        }
      }).catch(() => {
        // 点击取消
      });

    }
  },
  components: {

  }
}
</script>


<style lang="less">
  .my-container {
    height: 100%;
    .my-header {
      background: hotpink;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        i {
          font-size: 24px;
          margin-right: 11px;
        }
        img {
          width: 33px;
          height: 28px;
          margin: 0 11px;
        }
        span {
          width: 92px;
          height: 22px;
          font-size: 22px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: rgba(73, 161, 255, 1);
        }
      }
      .right {
        display: flex;
        align-items: center;
        img {
          width: 43px;
          height: 43px;
          border-radius: 50%;
          margin-right: 9px;
        }
        span.name {
          margin-right: 38px;
          font-size: 14px;
        }
      }
    }
    .my-aside {
      background: yellowgreen;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;
      min-height: 400px;
    }
    .my-main {
      background: #0094ff;
    }
  }
</style>